<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="总览" name="tabAll" style="text-align:center">
        <h3>已通过本平台创建报告22份，其中总报告5份，分报告17份</h3>
        <Chart id="mytest" class="indexchart" height="500px" width="1000px" :option="myoptionpie1" style="margin:0 auto" />
      </el-tab-pane>
      <el-tab-pane label="分用户统计" name="tabUser">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%"
          @sort-change="sortChange"
        >
          <el-table-column align="left" prop="username" label="用户名" min-width="160px" />
          <el-table-column align="center" label="总报告">
            <el-table-column width="100px" prop="tnum0" align="center" label="未生成" />
            <el-table-column width="100px" prop="tnum1" align="center" label="已生成" />
            <el-table-column width="100px" prop="tnum2" align="center" label="已上传" />
            <el-table-column width="150px" prop="totalReportNum" align="center" label="小计" />
          </el-table-column>
          <el-table-column align="center" label="分报告">
            <el-table-column width="100px" prop="num0" align="center" label="未生成" />
            <el-table-column width="100px" prop="num1" align="center" label="已生成" />
            <el-table-column width="100px" prop="num2" align="center" label="已上传" />
            <el-table-column width="150px" prop="reportNum" align="center" label="小计" />
          </el-table-column>
          <el-table-column width="150px" align="center" prop="allNum" label="合计" />
        </el-table>
      </el-tab-pane>
      <!-- <el-tab-pane label="按创建时间统计" name="tabMonth">
        <el-table
          ref="multipleTable"
          v-loading="listLoading"
          :data="list"
          border
          fit
          highlight-current-row
          style="width: 100%"
          @sort-change="sortChange"
        >
          <el-table-column align="left" prop="s_rpt_bgbh" label="年月" min-width="160px">
            <template slot-scope="scope">
              <span>{{ scope.row.srptBgbh }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="总报告" />
          <el-table-column align="center" label="分报告" />
          <el-table-column width="200px" prop="s_ggxh" label="合计" />
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="分状态统计" name="tabStatus">111
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>

import Chart from './Chart.vue'
export default {
  name: 'ArticleList',
  components: {
    Chart
  },
  data() {
    return {
      totalReportNum: 0,
      reportNum: 0,
      activeName: 'tabAll',
      myoptionpie1: null,
      list: [
      ]
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      this.$http
        .get('/api/check/statReports')
        .then(response => {
          this.listLoading = false
          if (response.data.success === true) {
            this.list = response.data.result.list
            this.totalReportNum = response.data.result.totalReportNum
            this.reportNum = response.data.result.reportNum
            this.myoptionpie1 = {
              title: {
                text: '报告数饼图',
                left: 'center'
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
              },
              legend: {
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: [
                  '总报告',
                  '分报告'
                ]
              },
              series: [
                {
                  name: '分类',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '50%'],
                  data: [
                    { name: '总报告', value: this.totalReportNum },
                    { name: '分报告', value: this.reportNum }
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
                }
              ]
            }
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.listLoading = false
        })
    }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
